<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>内边距会影响盒子实际大小</title>
  <style>
    /* 盒子使用 padding 值，会发生2件事情：
    1 内容和边框有了距离，添加了内边距
    2 padding 影响了盒子的实际大小
    也就是说，如果盒子已经有了宽度和高度，再设置内边距，会撑大盒子

    解决方案：
    如果保持盒子效果跟效果图大小一致，则让 width/height 减去多出来的内边距大小即可 */


    /* div {
      width: 200px;
      height: 200px;
      background-color: pink;
      padding: 20px;
    } */
    div {
      width: 160px;
      height: 160px;
      background-color: pink;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div>
    padding会影响盒子实际大小
    padding会影响盒子实际大小
    padding会影响盒子实际大小
  </div>
</body>
</html>